<template>
  <view>
    <!-- 导航栏 -->
    <tui-navigation-bar tion-bar :title="successPay ? '' : '提交支付'"></tui-navigation-bar>

    <view v-if="successPay" class="success-pay-container">
      <tui-icon name="circle-selected" size="100" color="green"></tui-icon>
      <view class="success-pay-text">订单支付成功</view>
      <button open-type="launchApp" app-parameter="wechat" @error="launchAppError" class="back-btn" hover-class="hover-fixed">点击返回 APP</button>
    </view>

    <block v-else>
      <view class="container modal-bg">
        <my-row title="门店名称" :value="orderInfo.bname"></my-row>
        <my-row title="房台号" :value="orderInfo.roomid"></my-row>
        <my-row title="操作员" :value="orderInfo.operator"></my-row>
        <my-row title="操作员工号" :value="orderInfo.staffnum"></my-row>
        <my-row title="下单时间" :value="orderInfo.addtime"></my-row>
        <my-row title="支付金额">
          <view slot="value" class="text-price">{{ orderInfo.paymoney }}</view>
        </my-row>
      </view>

      <tui-button class="pay-btn" :size="30" type="gold" width="100%" height="80rpx" margin="20px 0 0 0" shape="round" @tap="appOrderPay" hover-class="hover-fixed">
        确认支付
      </tui-button>
      <button v-if="$isEmpty(param)" open-type="launchApp" app-parameter="wechat" @error="launchAppError" class="back-btn" hover-class="hover-fixed">点击返回 APP</button>
    </block>

    <my-loading ref="loading"></my-loading>
  </view>
</template>

<script>
import Login from '@/controller/Login'
import Utils from '@/utils/'
export default {
  data() {
    return {
      inPaying: false, // 是否正在支付中
      successPay: false, // 是否支付成功
      param: null,
      openid: null, // 用于支付
      orderInfo: null // 订单数据
    }
  },
  // param: { childid: '1218', type: 'StaffBookOrder', uniacid: '38' }
  onLoad(param) {
    console.log('app-pay', param)
    this.param = param
    this.handleInit()
  },
  methods: {
    handleInit() {
      this.getAppOrderInfo(this.param)
      this.getOpenid()
    },
    // 获取 openid
    async getOpenid() {
      try {
        const code = await Login.loginCode()
        console.log('code', code)
        this.$api
          .payGetOpenid({ code })
          .then(res => {
            console.res('获取 openid 返回', res)
            this.openid = this.$format(res, 'data.openid')
          })
          .catch(err => {
            console.err('获取 openid 错误', err)
            this.errMsg(err, '获取 openid 失败')
          })
      } catch (err) {
        console.log(err)
      }
    },
    // App跳小程序支付页面查询订单信息
    getAppOrderInfo(param) {
      const baseParam = { childid: this.$format(param, 'childid'), type: this.$format(param, 'type') }
      const rules = [
        { name: 'childid', rule: ['required'], msg: ['childid 为空'] },
        { name: 'type', rule: ['required'], msg: ['type 为空'] }
      ]

      const checkRes = this.$validation.validate(baseParam, rules)
      if (checkRes) {
        this.$msg('text', checkRes)
        return
      }
      this.$api
        .getAppOrderInfo(baseParam)
        .then(res => {
          console.res('App跳小程序支付页面查询订单信息 返回', res)
          this.orderInfo = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('App跳小程序支付页面查询订单信息 错误', err)
        })
    },
    // APP支付页确认支付
    appOrderPay() {
      console.log('appOrderPay', this.inPaying)

      if (this.inPaying) return

      const param = { childid: this.$format(this.param, 'childid'), type: this.$format(this.param, 'type'), openid: this.openid }
      const rules = [
        { name: 'childid', rule: ['required'], msg: ['childid 为空'] },
        { name: 'type', rule: ['required'], msg: ['type 为空'] },
        { name: 'openid', rule: ['required'], msg: ['openid 为空'] }
      ]

      const checkRes = this.$validation.validate(param, rules)
      if (checkRes) {
        this.$msg('text', checkRes)
        return
      }
      console.param('APP支付页确认支付', param)
      this.inPaying = true
      this.$refs.loading.open()
      this.$api
        .appOrderPay(param)
        .then(res => {
          console.res('APP支付页确认支付 返回', res)
          const data = this.$format(res, 'data')
          if (this.$isEmpty(data)) return this.$msg('text', '支付参数异常 请重试')

          this.inPaying = false
          this.$refs.loading.close()

          this.wxPay(data, false)
            .then(wxPayRes => {
              console.res('wxPayRes', wxPayRes)
              this.successPay = true
            })
            .catch(wxPayErr => {
              console.err('wxPayErr', wxPayErr)
            })
        })
        .catch(err => {
          this.inPaying = false
          this.$refs.loading.close()
          console.err('APP支付页确认支付 错误', err)
          this.errMsg(err, '支付获取参数异常 请重试')
        })
    },
    launchAppError() {
      console.log('launchAppError', ...arguments)
    }
  },
  onPullDownRefresh() {
    this.handleInit()
    this.inPaying = false
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 2000)
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .row {
  padding: 10px 0px;
}

.pay-btn {
  position: fixed;
  bottom: 40px;
  left: 15px;
  right: 15px;
}

.success-pay-container {
  height: 50vh;
  @include is-flex(column, center, center, nowrap);
  .success-pay-text {
    margin-top: 10px;
    margin-bottom: 20px;
    letter-spacing: 1rpx;
  }
}

.back-btn {
  width: calc(100% - 30px);
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  margin: 20px 0 0 0;
  border: 0 !important;
  border-radius: 6rpx;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
  background: linear-gradient(180deg, #ffedcb, #f1c99a);
  color: #131828;

  position: fixed;
  bottom: 40px;
  left: 15px;
  right: 15px;
}

.hover-fixed {
  background: linear-gradient(180deg, #ffe4b3, #ebaa61);
}
</style>
